<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Css Globe: tag clouds</title>
<style>

body {
	margin:0;
	padding:0;
	background:#e1e1e1;
	font:80% Trebuchet MS, Arial, Helvetica, sans-serif;
	color:#555;
	line-height:180%;
}
a{color:#3c70d0;}
h1{
	font-size:180%;
	font-weight:normal;
	margin:0 20px;
	padding:1em 0;
	}
h2{
	font-size:160%;
	font-weight:normal;
	}	
h3{
	font-size:140%;
	font-weight:normal;
	}	
img{border:none;}
pre{
	display:block;
	font:12px "Courier New", Courier, monospace;
	padding:10px;
	border:1px solid #bae2f0;
	background:#e3f4f9;	
	margin:.5em 0;
	width:500px;
	}	
	
#container{
	margin:0 auto;
	text-align:left;
	width:700px;
	background:#fff;
	}
#main{
	float:left;
	display:inline;
	width:380px;
	margin-left:20px;	
	}
#side{
	float:left;
	display:inline;
	width:260px;
	margin-left:20px;
	}	
#footer{
	clear:both;
	padding:1em 0;
	margin:0 20px;
	}


/* Tag cloud */

	#tags ul{
		margin:1em 0;
		padding:.5em 10px;
		text-align:center;
		background:#71b5e9 url(bg_tags.gif) repeat-x;		
		}
	#tags li{
		margin:0;
		padding:0;
		list-style:none;
		display:inline;
		}
	#tags li a{
		text-decoration:none;
		color:#fff;
		padding:0 2px;	
		}
	#tags li a:hover{	
		color:#cff400;
		}		
	
	.tag1{font-size:100%;}
	.tag2{font-size:120%;}
	.tag3{font-size:140%;}
	.tag4{font-size:160%;}
	.tag5{font-size:180%;}
	
	/* alternative layout */

	#tags .alt{
		text-align:left;
		padding:0;
		background:none;
		}
	#tags .alt li{
		padding:2px 10px;
		background:#efefef;
		display:block;
		}
	#tags .alt .tag1, 
	#tags .alt .tag2, 
	#tags .alt .tag3, 
	#tags .alt .tag4, 
	#tags .alt .tag5{font-size:100%;}
	#tags .alt .tag1{background:#7cc0f4;}
	#tags .alt .tag2{background:#67abe0;}
	#tags .alt .tag3{background:#4d92c7;}
	#tags .alt .tag4{background:#3277ad;}
	#tags .alt .tag5{background:#266ca2;}
	
	.btn{display:block;}
	
/* // Tag cloud */

</style>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/tinysort.js"></script>
<script type="text/javascript">
$(document).ready(function(){	
	
	// create a style switch button
	var switcher = $('<a href="javascript:void(0)" class="btn">Change appearance</a>').toggle(
		function(){
			$("#tags ul").hide().addClass("alt").fadeIn("fast");
		},
		function(){
			$("#tags ul").hide().removeClass("alt").fadeIn("fast");
		}
	);
 	$('#tags').append(switcher);
	
	// create a sort by alphabet button
	var sortabc = $('<a href="javascript:void(0)" class="btn">Sort alphabetically</a>').toggle(
		function(){
			$("#tags ul li").tsort({order:"asc"});
		},	
		function(){
			$("#tags ul li").tsort({order:"desc"});
		}		
		);
 	$('#tags').append(sortabc);		
	
	// create a sort by alphabet button	
	var sortstrength = $('<a href="javascript:void(0)" class="btn">Sort by strength</a>').toggle(
		function(){
			$("#tags ul li").tsort({order:"desc",attr:"class"});
		},	
		function(){
			$("#tags ul li").tsort({order:"asc",attr:"class"});
		}		
		);
 	$('#tags').append(sortstrength);			
	
});
</script>

</head>

<body>

<div id="container">	
	
	<h1>Tag Cloud Example by Css Globe</h1>
	
	<div id="main">
	
	<h2>Main column</h2>
	
	<script type="text/javascript" src="http://cssglobe.com/ads/blogsponsor.js"></script>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sagittis libero aliquet augue. Quisque dui lacus, consequat a, dictum non, venenatis et, tortor. Suspendisse mauris. In accumsan egestas neque. Mauris eget felis. Suspendisse condimentum eleifend nulla. </p>
	<p>Mauris aliquam, mi aliquet imperdiet elementum, arcu neque eleifend tortor, ac posuere dolor lectus sit amet nulla. Phasellus elit nibh, iaculis sed, semper non, accumsan at, metus. In massa. Quisque porttitor tellus quis mauris pellentesque tincidunt. Phasellus suscipit. Proin elementum leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
		
	</div>

	<div id="side">
	
		<h2>Side column (Tag Cloud)</h2>
	
		<div id="tags">
			<ul>
				<li class="tag1"><a href="#">Lorem ipsum</a></li> 
				<li class="tag2"><a href="#">Dolor sit amet</a></li>
				<li class="tag3"><a href="#">Consectetur adipiscing elit</a></li>
				<li class="tag2"><a href="#">Proin </a></li>
				<li class="tag4"><a href="#">Sagittis libero</a></li>
				<li class="tag1"><a href="#">Aliquet augue</a></li>
				<li class="tag1"><a href="#">Quisque dui lacus</a></li>
				<li class="tag5"><a href="#">Consequat</a></li>
				<li class="tag2"><a href="#">Dictum non</a></li>
				<li class="tag1"><a href="#">Venenatis et tortor</a></li>
				<li class="tag3"><a href="#">Suspendisse mauris</a></li>
				<li class="tag4"><a href="#">In accumsan </a></li>
				<li class="tag1"><a href="#">Egestas neque</a></li>
				<li class="tag5"><a href="#">Mauris eget felis</a></li>
				<li class="tag1"><a href="#">Suspendisse</a></li>
				<li class="tag2"><a href="#">condimentum eleifend nulla</a></li>
			</ul>
		</div>
	
	</div>

	<div id="footer">
		<p><a href="http://cssglobe.com/post/4581/tag-clouds-styling-and-adding-sort-options" title="tag cloud">back to the article</a></p>
		<p><strong>Tag Cloud Examples</strong> are brought to you by <a href="http://cssglobe.com" title="web standards magazine and css news">Css Globe</a> and supported by <a href="http://templatica.com">Css Templates</a> by Templatica</p>
	</div>

</div>

</body>
</html>
